<template>
  <div id="detail">
    <p class="jsdetail">结算单明细</p>

    <div class="detailheader">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="statementId" label="结算单号" />
        <el-table-column prop="checkDate" label="收货日期" />
        <el-table-column prop="statementDate" label="结算日期" />
        <el-table-column prop="auditor" label="发出人" />
        <el-table-column prop="ensureMan" label="确认人" />
        <el-table-column prop="statementMan" label="结算人" />
        <el-table-column prop="status" label="结算状态">
           <template slot-scope="scope">
          {{ scope.row.status | statusFitlter}}
          </template>
       </el-table-column>
        <el-table-column prop="taxRate" label="税率">
          <template slot-scope="scope">
          {{ scope.row.taxRate | taxRateFitlter}}
          </template>
        </el-table-column>
        </el-table-column>
      </el-table>
    </div>

    <div class="btn">
      <el-button
        type="primary"
        class="account"
        @click="centerDialogVisible = true"
        >查看附件</el-button
      >
    </div>

    <div class="table">
      <el-table
        :data="datadetail"
        border
        style="width: 100%"
        :summary-method="getSummaries"
        show-summary
      >
        <el-table-column type="index" width="auto" label="序号" />
        <el-table-column prop="goodsId" width="auto" label="商品ID" />
        <el-table-column prop="goodsName" width="auto" label="商品名称" />
        <el-table-column prop="goodsNum" width="auto" label="数量" />
        <el-table-column prop="units" width="auto" label="辅助单位" />
        <el-table-column prop="weight" width="auto" label="实际重量(斤)" />
        <el-table-column prop="price" width="auto" label="单价" />
        <el-table-column prop="totalPrice" width="auto" label="结算金额" />
      </el-table>
    </div>

    <el-dialog
      title="查看附件"
      :visible.sync="centerDialogVisible"
      width="30%"
      center
    >
      <div class="demo-image__preview" style="text-align:center">
        <el-image
         v-if="url"
          style="width: 180px; height: 180px"
          :src="url"
          :preview-src-list="srcList"
        >
        </el-image>
        <h3 v-else>没有附件数据</h3>
      </div>

     
    </el-dialog>
  </div>
</template>

<script>
import {getStatementDetail} from '@/api/partner.js'
export default {
   filters: {
    statusFitlter(value) {
      if (value === 0) {
        return "待确认";
      } else if (value === 1) {
        return "已发送";
      } else if (value === 2)  {
        return "已结算";
      }else if (value === 3)  {
        return "已验收";
      }
    },
    taxRateFitlter: value => {
      return value + "%";
    },
  },
  data() {
    return {
      tableData: [],
      datadetail: [],
      centerDialogVisible: false,
      url:"",
      srcList: [],
       trTotalPrice: ""
    };
  },
  mounted() {
    this.init()
  },
  methods: {
    init(){
      var statementId = {statementId:this.$route.query.statementId}
      getStatementDetail(statementId)
      .then(res=>{
        console.log(res)
        this.trTotalPrice = res.data.trTotalPrice;
          var arr = [];
          arr.push(res.data);
          this.tableData = arr;
          this.datadetail = res.data.statementGoodsList;
          this.url = res.data.accessory
          var arr = []
            arr.push(this.accessory)
            this.srcList = arr
      })
    },
    // 合计列
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      var goodsNum = 0;
      var ta = 0;
      data.map(item => {
        goodsNum += Number(item.goodsNum);
        ta += Number(item.weight);
        return { goodsNum, ta };
      });
      columns.forEach((column, index) => {
        sums[2] = "合计数量";
        sums[3] = goodsNum;
        sums[4] = "合计重量";
        sums[5] = ta;
        sums[6] = "合计金额(含税)";
        sums[7] = this.trTotalPrice;
      });

      return sums;
    }
  }
};
</script>

<style lang="scss" scoped>
#detail {
  padding: 20px 20px;
  .jsdetail {
    font-size: 22px;
    margin-bottom: 60px;
  }
  .btn {
    text-align: right;
    margin: 30px;
  }
  .detailheader {
    margin: 20px 0px 50px;
  }
}
</style>
